<template>
  <el-dialog
    :title="title"
    class="dialogCustomer"
    :visible.sync="dialogVisible"
    :width="width"
    :class="wrapperClass"
    :show-close="showClose"
    :close-on-click-modal="closeOnClickModal"
    append-to-body
    :before-close="handleClose">
    <div slot="title" class="header-wrapper" v-if="$slots.header">
      <slot name="header"></slot>
    </div>
    <slot name="content"></slot>
    <div slot="footer" class="dialog-footer" :style="{ 'text-align': align }" v-if="isShowBtn">
      <button @click="cancel" class="cancel-btn btn" v-if="showCancel">{{$t('common.cancel')}}</button>
      <button type="primar " @click="confirm" class="font-family btn primary-button " v-if="showConfirm">{{confirmText}}</button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: () => false,
    },
    width: {
      type: String,
      default: () => '50%',
    },
    title: {
      type: String,
      default: () => '',
    },
    align: {
      type: String,
      default: () => 'center',
    },
    wrapperClass: {
      type: String,
      default: () => '',
    },
    headerBg: {
      type: String,
      default: () => 'blue',
    },
    showClose: {
      type: Boolean,
      default: () => true,
    },
    showCancel: {
      type: Boolean,
      default: () => false,
    },
    showConfirm: {
      type: Boolean,
      default: () => true,
    },
    confirmText: {
      type: String,
      default: () => 'Confirm',
    },
    closeOnClickModal: {
      type: Boolean,
      default: () => true,
    },
    dialogType: {
      type: String,
      default: () => '',
    },
    isShowBtn: {
      type: Boolean,
      default: () => true,
    },
    isShowHeader: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
    };
  },
  methods: {
    handleClose() {
      this.$emit('cancel');
      this.dialogVisible = false;
    },
    confirm() {
      if (this.dialogType === 'tips') {
        this.dialogVisible = false;
      }
      this.$emit('confirm');
    },
    openDialog() {
      this.dialogVisible = true;
    },
    cancel() {
      this.$emit('cancel');
      this.dialogVisible = false;
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.showDialog;
      },
      set(val) {
        this.$emit('update:showDialog', val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';
.dialogCustomer{
  ::v-deep .el-dialog{
    border-radius: 30px !important;
    background: $bg-color;
  }
  ::v-deep .el-dialog__body{
    padding: 30px;
    box-sizing: border-box;
  }
  ::v-deep .el-dialog__close{
    font-size: 30px;
    color: #fff;
  }
  ::v-deep .el-dialog__header{
    padding: 30px;
    border-bottom: 1px solid $theme;
    box-sizing: border-box;
  }
  ::v-deep .el-dialog__footer{
    text-align: center;
    padding: 0;
  }
  ::v-deep .el-dialog__title{
    color: $global-primary;
    font-size: 22px;
    font-weight: bold;
    font-family: FontStyle;
  }
}
.dialog-footer{
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  .btn{
    display: block;
    border-radius: 12px;
    border: none;
    outline: none;
    font-size: 18px;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 0 0 0;
    width: 218px;
    height: 52px;
    line-height: 52px;
  }
  .cancel-btn{
    color: #999999;
    background-color: rgba(0,0,0,0);
    border-right: 1PX solid #3C3C3D;
  }
}
</style>
